<template>
  <div>
    <el-table :data="lst">
      <el-table-column prop="code" label="编号"> </el-table-column>
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column prop="described" label="描述"> </el-table-column>
      <el-table-column prop="money" label="金币"> </el-table-column>
      <el-table-column prop="userid" label="雇主"> </el-table-column>
      <el-table-column prop="closeid" label="支付方式"> </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="qiang(scope.row.code)"
            >枪需求</el-button
          >
          <el-button type="text" size="small" @click="send">咨询</el-button>
        </template>
      </el-table-column>
    </el-table>
    <van-pagination
      v-model="page"
      :total-items="total"
      :items-per-page="page_size"
      @change="sneed"
    />
    <van-dialog v-model="show" title="标题" show-cancel-button>
      <div>
        <ul>
          <li v-for="(i, index) in meslist" :key="index">{{ i }}</li>
        </ul>
      </div>
      <div>
        <van-field v-model="mes" /><van-button @click="submit">发送</van-button>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { v4 as uuid } from "uuid";
export default {
  data() {
    return {
      lst: "",
      total: 0,
      page: 1,
      page_size: 2,
      userid: localStorage.getItem("userid"),
      show: false,
      mes: "",
      meslist: [],
      id: "",
    };
  },
  mounted() {
    this.sneed();
  },
  methods: {
    sneed() {
      this.axios
        .get("/sneed?page=" + this.page + "&page_size=" + this.page_size)
        .then((res) => {
          this.lst = res.data.data;
          this.total = res.data.total;
        });
    },
    qiang(code) {
      var data = { code: code, userid: this.userid };
      this.axios.post("/qneed", data).then((res) => {
        alert(res.data.msg);
      });
    },
    send(){
            this.show=true
            this.conn()
        },
        conn(){
            this.id = uuid()
            this.ws = new WebSocket("ws://localhost:8000/sockconn?id="+this.id)
            this.ws.onopen=()=>{
                this.ws.send(JSON.stringify({"send":"conn","mes":"conn"}))
            }
            this.ws.onmessage=(res)=>{
                console.log(res)
                var data = JSON.parse(res.data)
                this.meslist.push(data.meslist)
            }
        },
        submit(){
            var mm = this.id +"说:"+this.mes
            this.meslist.push(mm)
            this.ws.send(JSON.stringify({"send":"kefu","mes":mm}))
        }
    
  },
};
</script>

<style>
</style>